<!-- 饼图 -->
<template>
    <el-card>
        <template #header> 产品分类饼图 </template>
        <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
    id: {
        type: String,
        default: "pieChart",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
});
const options = {
    grid: {
        left: "2%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
    },
    legend: {
        top: "bottom",
        textStyle: {
            color: "#999",
        },
    },
    series: [
        {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 130],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
                borderRadius: 1,
                color: function (params: any) {
                    //自定义颜色
                    const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
                    return colorList[params.dataIndex];
                },
            },
            data: [
                { value: 26, name: "家用电器" },
                { value: 27, name: "户外运动" },
                { value: 24, name: "汽车用品" },
                { value: 23, name: "手机数码" },
            ],
        },
    ],
};

const chart = ref<any>("");

onMounted(() => {
    chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
    );

    chart.value.setOption(options);

    window.addEventListener("resize", () => {
        chart.value.resize();
    });
});

onActivated(() => {
    if (chart.value) {
        chart.value.resize();
    }
});
</script>